<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            height: 600px;
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
        }

        .header{
            height: 23%;
            position: relative;
            background-color: #437c44;
        }
        .header div{
            position: relative;
            margin-top: 10px;
            margin-left: 10px;
            font-size: 20px;
            color: white;
        }

        .title{
            height: 10%;
            position: relative;
            background-color: #d58512;
        }

        .title div{
            color: white;
            font-size: 20px;
            margin: 5px 5px auto;
        }
        .center{
            display: flex;
            height: 50%;
            position: relative;
            justify-content: space-between;
        }

        .center div:nth-child(1){
            height: 100%;
            width: 49%;
            font-size: 20px;
            color: white;
            padding: 5px 0 0 5px;
            background-color: #2aabd2;
        }
        .center div:nth-child(2){
            height: 100%;
            width: 49%;
            font-size: 20px;
            color: white;
            background-color: #e4b9c0;
        }

        .bottom{
            height: 8%;
            background-color: #1b6d85;
        }

        .bottom div{
            font-size: 20px;
            color: white;
            margin: 5px 5px;
        }



    </style>
</head>
<body>
<div class="container">
    <!--头部-->
    <div class="header">
        <div>页面标题</div>
    </div>
    <!--主导航区-->
    <div class="title">
        <div>主导航区</div>
    </div>
    <div class="center">
        <div>侧边栏</div>
        <div></div>
    </div>
    <div class="bottom">
        <div>底边栏</div>
    </div>
</div>
</body>
</html>